<template>
    <div class="wrapper">
        <el-table :data="raidInfo.records" border stripe style="width: 100%" height="550">
            <el-table-column prop="date" align="center" label="时间" width="180"></el-table-column>
            <el-table-column prop="raidEvent" label="备注">
                <template slot-scope="scope">
                    <div v-if="scope.row.raidEvent == 'loot'" :style="{color: events[scope.row.raidEvent].color}">
                        【{{scope.row.more.player}}】拾取物品【<span :style="{color:scope.row.more.color}">{{scope.row.more.itemName}}</span>】
                        <span v-if="scope.row.more.count>1">x{{scope.row.more.count}}</span>
                        <span v-if="scope.row.more.costs">,消耗积分{{scope.row.more.costs}}</span>
                    </div>
                    <div v-else :style="{color:events[scope.row.raidEvent].color}">{{scope.row.description}}</div>
                </template>
            </el-table-column>
            <el-table-column prop="raidEvent" align="center" label="事件" width="140">
                <template slot-scope="scope">
                    <span :style="{color:events[scope.row.raidEvent].color}">{{events[scope.row.raidEvent].text}}</span>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
function toDateString(v) {
  let dt = new Date(v);
  return (
    dt.getFullYear() +
    "-" +
    ("0" + (dt.getMonth() + 1)).slice(-2) +
    "-" +
    ("0" + dt.getDate()).slice(-2) +
    " " +
    ("0" + dt.getHours()).slice(-2) +
    ":" +
    ("0" + dt.getMinutes()).slice(-2) +
    ":" +
    ("0" + dt.getSeconds()).slice(-2)
  );
}

export default {
  props: {
    raid: {
      required: true,
      type: Object
    }
  },
  data() {
    return {
      events: {
        join: { text: "加入团队", color: "green" },
        leave: { text: "离开团队", color: "gray" },
        kill: { text: "击杀BOSS", color: "red" },
        loot: { text: "拾取物品", color: "#409EFF" }
      },
      raidInfo: {
        zone: '',
        start: '',
        end: '',
        records: []
      }
    };
  },
  watch: {
      raid (val) {
          this.records = this.getRecords()
      }
  },
  methods: {
    getRecords() {
      let raid = this.raid;
      let records = [];
      Object.keys(raid.players).forEach(player => {
        raid.players[player].join.forEach(time => {
          records.push({
            date: toDateString(time),
            raidEvent: "join",
            description: `${player}加入团队`
          });
        });

        raid.players[player].leave.forEach(time => {
          records.push({
            date: toDateString(time),
            raidEvent: "leave",
            description: `${player}离开团队`
          });
        });
      });

      raid.bossKills.forEach(b => {
        records.push({
          date: b.time,
          raidEvent: "kill",
          description: `击杀BOSS【${b.name}】`
        });
      });

      raid.loot.forEach(l => {
        records.push({
          date: l.time,
          raidEvent: "loot",
          description: ``,
          more: {
            ...l
          }
        });
      });

      records.sort((a,b)=>a.date>b.date?1:-1)

      return {
        zone: raid.zone,
        start: raid.start,
        end: raid.end,
        records
      };
    }
  },
  created () {
      this.raidInfo = this.getRecords();
  }
};
</script>

<style lang="less" scoped>
.wrapper{
  height: 550px;
  overflow-y: auto;
}
</style>
